<script>
/**
 * 盒子
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
} from 'vue';

export default defineComponent({
    props: {
        dataInfo: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    setup(props) {
        const dataContainer = reactive({
            loading: false,
            list: [
                // { dateTime: '好好好', center: '111' },
            ],
            list3: [],
            intervalId: null
        });
        let currentIndex = 0;
        watch(
            () => props.dataInfo,
            (newDataInfo) => {
                const val = JSON.parse(JSON.stringify(newDataInfo))
                const chunkSize = 3;
                // console.log(dataContainer.list3,222)
                dataContainer.list = val.map(v => {
                        return {
                            dateTime: v[0],
                            center: v[1]
                        };
                })
                for (let i = 0; i < dataContainer.list.length; i += chunkSize) {
                    dataContainer.list3.push(dataContainer.list.slice(i, i + chunkSize));
                }
                console.log(dataContainer.list3,111)
            },
            {
                immediate: true,
                deep: true,
            },
        )

        onMounted(() => {
            // startScrolling();
        });

        return {
            dataContainer,

        };
    },
});
</script>

<template>
    <div class="right_4">
        <el-table :data="dataContainer.list" stripe height="12%">
            <el-table-column label="序号" type="index" width="60" align="center" />
            <el-table-column label="时间" show-overflow-tooltip align="center" prop="dateTime" />
            <el-table-column label="具体告警信息" show-overflow-tooltip align="center" prop="center" />
        </el-table>
        <el-carousel height="12.500rem" direction="vertical" :autoplay="true" interval="3000">
            <el-carousel-item v-for="(item, index) in dataContainer.list3">
                <div class="list_div" v-for="(v,indexTwo) in item">
                    <div class="divOne">{{  1+indexTwo }}</div>
                    <div class="divTwo">{{ v.dateTime }}</div>
                    <div class="divThree">{{ v.center }}</div>
                </div>
            </el-carousel-item>
        </el-carousel>
        <!-- <div class="waiDiv" ref="scrollContainer">

        </div> -->
    </div>
</template>

<style lang="scss" scoped>
.waiDiv {
    height: 12.500rem;
    /* 设置固定高度 */
    overflow-y: auto;
    /* 允许垂直滚动 */
    position: relative;
    /* 确保子元素相对于它定位 */
}

.list_div {
    display: flex;
    color: #F3FFFE;
    margin-top: 1.425rem;
    transition: transform 1s ease-in-out;

    /* 平滑过渡效果 */
    .divOne {
        width: 3%;
        // text-align: center;
        margin-left: 1.2rem;
        padding: 0.313rem 0.000rem;
    }

    .divTwo {
        width: 40%;
        margin-left: 8%;
        text-align: center;
    }

    .divThree {
        margin-left: 2%;
        width: 50%;
        text-align: center;
        white-space: nowrap;
        /* 防止内容换行 */
        overflow: hidden;
        /* 隐藏溢出的内容 */
        text-overflow: ellipsis;
        /* 显示省略号 */
    }
}

.right_4 {
    width: 100%;
    height: 100%;

    ::v-deep .el-table,
    ::v-deep .el-table--border {
        background-color: transparent !important;
        color: #ABDDEF;
    }

    ::v-deep .el-table .el-table__header-wrapper th {

        background-color: transparent;
        color: #ABDDEF;
    }

    ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
        background-color: #09203d !important;
    }

    ::v-deep .el-table tr,
    ::v-deep .el-table__body tr:hover>td {
        background-color: transparent !important;
    }

    ::v-deep .el-table th.el-table__cell,
    .el-table th.el-table__cell.is-leaf {

        border: none !important;
    }

    ::v-deep .el-table__inner-wrapper::before {
        background-color: rgba(0, 62, 90, 0.5);

    }

    ::v-deep .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        border-bottom-color: #003E5A !important;
    }
}
</style>
